<template>
  <div>
    <Category class="card-list" :disabled="scene === 1" />
    <el-card class="card-list">
      <SpuTable
        ref="SpuTableRef"
        v-show="scene === 0"
        @addSpu="addSpu"
        @addSku="addSku"
        @editSpu="editSpu"
        @removeSpu="removeSpu"
        
      />

      <SpuForm
        ref="SpuFormRef"
        v-show="scene === 1"
        @cancelSpu="cancelSpu"
        @saveSpu="saveSpu"
      />
      <SkuForm
        ref="SkuFormRef"
        v-show="scene === 2"
        @cancelSku="cancelSku"
        @saveSku="saveSku"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref,onBeforeUnmount } from 'vue'
import SpuTable from './spuTable.vue'
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
import type { SpuData } from '@/api/product/spu/type'
import useCategoryStore from '@/store/modules/category'
const categoryStore = useCategoryStore()

let scene = ref<number>(0) // 0显示spu 1添加或者修改spu 2添加sku

const addSpu = () => {
  scene.value = 1
  SpuFormRef.value.initAddSpu(categoryStore.c3Id)
}
const addSku = (row: SpuData) => {
  scene.value = 2
  SkuFormRef.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
const editSpu = (row: SpuData) => {
  scene.value = 1
  SpuFormRef.value.initHasSpuData(row)
}
const removeSpu = () => {
  scene.value = 0
  const pageNo = SpuTableRef.value.tableData.value.length>1?SpuTableRef.value.pageNo:SpuTableRef.value.pageNo-1
  SpuTableRef.value.getSpu(pageNo)

}

const cancelSpu = () => {
  scene.value = 0
}
const cancelSku = () => {
  scene.value = 0
}
const saveSpu = (type: string) => {
  scene.value = 0
  if (type === 'update') {
    SpuTableRef.value.getSpu(SpuTableRef.value.pageNo)
  } else {
    SpuTableRef.value.getSpu()
  }
}
const saveSku = () => {
  scene.value = 0
}

const SpuFormRef = ref()
const SpuTableRef = ref()
const SkuFormRef = ref()

onBeforeUnmount(()=>{
  categoryStore.$reset()
})
</script>

<style scoped></style>
